<template>
  <div>
    <el-row>
      <el-form :model="userForm" :rules="userRules" ref="userForm">
        <el-col :span="4">
          <el-form-item>
            <el-input
              placeholder="平台用户名"
              v-model="userForm.qusername"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="4">
          <el-form-item>
            <el-input
              placeholder="平台用户姓名"
              v-model="userForm.fullname"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="4">
          <el-select v-model="userForm.qdeptid">
            <el-option
              :key="index"
              :label="item.deptname"
              :value="item.id"
              v-for="(item, index) of selectList"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :offset="1" :span="3">
          <el-form-item>
            <el-button @click="handleUserQuery(1)">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="4" align="right">
          <el-form-item>
            <el-button @click="handleAdd()" type="primary">
              <i class="el-icon-plus"></i>
              新增用户
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="mt-40">
      <el-col :span="24">
        <el-table :data="tableData" class="table">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
          ></el-table-column>
          <el-table-column align="center" label="平台用户名" width="200">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="平台用户姓名" width="200">
            <template slot-scope="scope">
              {{ scope.row.fullname }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="性别" width="120">
            <template slot-scope="scope">
              {{ scope.row.sex }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属角色" width="180">
            <template slot-scope="scope">
              {{ scope.row.rolename }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属部门" width="180">
            <template slot-scope="scope">
              {{ scope.row.deptname }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleAdd(scope.row)" size="small">
                修改
              </el-button>
              <el-button
                @click="handleDel(scope.row)"
                size="small"
                type="primary"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--分页-->
    <el-row class="mt-40" justify="end" type="flex">
      <el-pagination
        :current-page="pages.curPage"
        :page-size="10"
        :page-sizes="[5, 10]"
        :total="pages.totalCount"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev,pager,next,jumper"
      >
      </el-pagination>
    </el-row>
    <!--model-->
    <user-manage-model
      :dialog="dialog"
      :userFormModel="userFormModel"
    ></user-manage-model>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { UserForm, Pages, Dialog, UserFormModel } from "@/interface/interface";
import { usequery, delquery, alldeptinfo } from "@/api/api";
import UserManageModel from "@/views/rightsmanagement/permissmodels/userManageModel.vue";
import { Notification, Message } from "element-ui";
@Component({
  components: { UserManageModel }
})
export default class UserManage extends Vue {
  protected name!: "UserManage";
  protected userForm: UserForm = {
    qdeptid: "",
    qusername: "",
    fullname: ""
  };
  protected userFormModel: UserFormModel = {
    account: "",
    password: "",
    deptid: "",
    sex: "女",
    username: "",
    iphone: "",
    email: "",
    number: ""
  };
  protected tableData: any[] = [];
  protected userRules = {};
  protected selectList = [];
  protected pages: Pages = {
    totalCount: 1,
    curPage: 1,
    pageNum: 1
  };
  protected dialog: Dialog = {
    isDialog: false,
    options: "",
    title: ""
  };

  protected created() {
    this.handleUserQuery(1);
    this.getSelect();
  }

  protected async handleUserQuery(pageNum: number) {
    const { qdeptid, qusername, fullname } = this.userForm as any;
    const res = await usequery({ qdeptid, qusername, fullname, pageNum });
    if (res) {
      const { success, message, object } = res;
      if (success) {
        const { datas, ...pages } = object;

        let resultDatas = datas.map((val: any) => {
          val.deptname = val.dept.deptname;
          if (val.sex === "1") {
            val.sex = "男";
          } else if (val.sex === "0") {
            val.sex = "女";
          } else {
            val.sex = "女";
          }
          return val;
        });
        this.tableData = resultDatas;
        this.pages = pages;
      }
    }
  }

  protected handleCurrentChange() {
    this.handleUserQuery(1);
  }

  /*添加/编辑*/
  protected handleAdd(params: any) {
    if (params) {
      Object.assign(this.userFormModel, params);
      this.dialog = {
        isDialog: true,
        options: "edit",
        title: "编辑信息"
      };
    } else {
      this.userFormModel = {
        account: "",
        password: "",
        deptid: "",
        sex: "女",
        username: "",
        iphone: "",
        email: "",
        number: ""
      };
      this.dialog = {
        isDialog: true,
        options: "add",
        title: "添加信息"
      };
    }
  }

  protected async getSelect() {
    const res = await alldeptinfo();
    if (res) {
      const { success, message, object } = res;
      if (success) {
        this.selectList = object;
      } else {
        this.$notify({
          title: "提示",
          message: "数据信息获取失败"
        });
      }
    } else {
      this.$message({
        type: "error",
        message: "数据出错"
      });
    }
  }

  /*删除*/
  protected async handleDel(params: any) {
    const { id } = params;
    const res = await delquery({ userid: id });
    if (res) {
      const { success } = res;
      if (success) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
      }
    } else {
      this.$message({
        type: "error",
        message: "删除错误"
      });
    }
  }
}
</script>

<style lang="scss" scoped></style>
